﻿<!DOCTYPE>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <title>设备日历班次维护</title>
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />
</head>
<body>
    <div class="panelSection">
        <div class="easyui-panel " title="查询" style="padding: 3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
            <form id="queryForm" action="">
            <div style="margin: 3px 0px 3px 3px">
                <div style="float: left;">
                    <div class="divLabel" style="margin-bottom: 5px">
                        工区：</div>
                    <select style='width: 120px; height: 20px' id='ddlWorkCenter' name="WorkCenterName"
                        data-options='editable:false,panelHeight:200' class='easyui-combobox'>
                    </select>
                </div>
                <div style="float: left; margin-left: 10px">
                    <div class="divLabel" style="margin-bottom: 5px">
                        班组：</div>
                    <select style='width: 120px; height: 20px' id='ddlTeam' name="TeamName" data-options='editable:false,panelHeight:200'
                        class='easyui-combobox'>
                    </select>
                </div>
                <div style="float: left; margin-left: 10px">
                    <div class="divLabel" style="margin-bottom: 5px">
                        设备编号：</div>
                    <input id="txtResourceName" name="ResourceName" class="easyui-textbox" style="width: 120px;
                        height: 20px" />
                </div>
                <div style="float: left; margin-left: 10px">
                    <div class="divLabel" style="margin-bottom: 5px">
                        日期范围：</div>
                    <input id="txtStartDate" name="StartDate" class="easyui-datebox" style="width: 120px;
                        height: 20px" />
                    -
                    <input id="txtEndDate" name="EndDate" class="easyui-datebox" style="width: 120px;
                        height: 20px" />
                </div>
                <div style="float: left; margin-left: 10px">
                    <button id="btnSearch" class="easyui-linkbutton" type="button" data-options="" style="margin-top: 16px;
                        width: 80px;">
                        查询</button>
                    <button id="btnReset" class="easyui-linkbutton" type="button" data-options="" style="margin-top: 16px;
                        width: 50px;">
                        重置</button>
                </div>
                <div style="clear: both">
                </div>
            </div>
            </form>
        </div>
    </div>
    <div class="panelSection">
        <div class="easyui-panel " title="结果区域" style="padding: 3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
            <div style="margin: 3px 0px 3px 3px">
                <div style="float: left; width: 20%">
                    <table id="gdResourceInfo" class="easyui-datagrid" style="width: 100%; height: 500px"
                        data-options="rownumbers:true,fitColumns:true,singleSelect:true">
                    </table>
                </div>
                <div data-options="region:'center',iconCls:'icon-ok'" style="float: left; width: 80%;
                    padding: 10px">
                    <div id="mainView" style="height: 500px">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--班次添加弹窗-->
    <div id="dd" style="display: none;">
        <div style="padding: 3px 0px 0px 3px">
            <div class="panelSection">
                <div class="easyui-panel " title="结果区域" style="padding: 3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
                    <table id="gdWorkShiftList" class="easyui-datagrid" style="width: 99%; height: 300px"
                        data-options="rownumbers:true">
                    </table>
                </div>
            </div>
            <div class="panelSection">
                <div class="easyui-panel " title="结果区域" style="padding: 3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
                    <form id="editWsForm" action="">
                    <input id="txtDayDate" name="dayDate" type="hidden" />
                    <div style="float: left;">
                        <div class="divLabel" style="margin-bottom: 5px">
                            班次开始时间：</div>
                        <input id="txtWsStartTime" name="wsStartTime" class="easyui-timespinner" style="width: 120px;
                            height: 20px" data-options="showSeconds:true" />
                    </div>
                    <div style="float: left; margin-left: 10px">
                        <div class="divLabel" style="margin-bottom: 5px">
                            班次结束时间：</div>
                        <input id="txtWsEndTime" name="wsEndTime" class="easyui-timespinner" style="width: 120px;
                            height: 20px" data-options="showSeconds:true" />
                    </div>
                    </form>
                </div>
            </div>
            <div class="panelSection">
                <div class="easyui-panel " title="结果区域" style="padding: 3px;" data-options="closable:false,collapsible:true,minimizable:false,maximizable:false">
                    <div style="float: left; width: 100%; margin-top: 3px">
                        <button id="btnSave" class="easyui-linkbutton" type="button" style="width: 100px;">
                            保存</button>
                        <button id="btnClose" class="easyui-linkbutton" type="button" style="width: 50px;">
                            关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script src="/InSiteWebApplication/Scripts/echarts.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/ReferenceJsLib.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/datagrid-detailview.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script type="text/javascript">
    /*
    创建人：zhangrj
    日期：2025-08-13
    描述：设备日历班次维护js
    */
    var page = {
        rootPath: getRootPath(), //网站根路径
        url: getRootPath() + "/Ashx/ApsHandler/ResCalendarWorkShiftMaintHandler.ashx",
        commonUrl: getRootPath() + "/Ashx/CommonHandler.ashx",
        //初始化页面
        init: function () {
            page.bind();
            resDetailView.bind();
            page.initPageData();
        },
        //页面事件绑定
        bind: function () {
            //列表加载
            $("#gdResourceInfo").datagrid({
                columns: [[
                 { field: 'RESOURCENAME', title: '设备编号', width: 180 },
                 { field: 'RESOURCEDESC', title: '设备名称', width: 180 }
                ]],
                onClickCell: function (index, field, value) {
                    if (field === "_expander") {
                        return;
                    }
                    $('#gdResourceInfo').datagrid('selectRow', index);
                    page.bindResCalDetail();
                },
                view: detailview,
                detailFormatter: function (index, row) {
                    return '<div style="padding:2px;position:relative;"></div>';
                },
                onExpandRow: function (index, row) {
                    var ddv = $(this).datagrid('getRowDetail', index).find('div');
                    ddv.html('<div style="float: left; width: 150px">工区：' + (row.WORKCENTERNAME === null ? "" : row.WORKCENTERNAME) + '</div>' +
                    '<div style="float: left; width: 150px">班组：' + (row.TEAMNAME === null ? "" : row.TEAMNAME) + '</div>' +
                    '<div style="float: left; width: 150px">日历：' + (row.MAKECALENDARNAME === null ? "" : row.MAKECALENDARNAME) + '</div>' +
                    '<div style="float: left; width: 150px">班次：' + (row.WORKSHIFTNAME === null ? "" : row.WORKSHIFTNAME) + '</div>');
                    $('#gdResourceInfo').datagrid('fixDetailRowHeight', index);
                }
            });
            //查询按钮
            $('#btnSearch').on("click", function () {
                page.clearPage(false, true, true);
                page.searchData();
            });
            //清除按钮
            $('#btnReset').on("click", function () {
                page.clearPage(true, true, true);
            });
        },
        //初始化页面数据
        initPageData: function () {
            $("#txtStartDate").datebox("setValue", dayjs().startOf('month').format('YYYY-MM-DD')); //开始日期
            $("#txtEndDate").datebox("setValue", dayjs().endOf('month').format('YYYY-MM-DD')); //结束日期
            //绑定查询的工区
            $('#ddlWorkCenter').combobox({
                url: page.commonUrl + "?action=getWorkcenterByFactory",
                valueField: 'WORKCENTERID',
                textField: 'WORKCENTERNAME',
                onSelect: function (rec) {
                    page.bindTeamData(rec.WORKCENTERID);
                }
            });
        },
        //绑定班组（查询）
        bindTeamData: function (workcenterID) {
            page.post(page.commonUrl, { action: "GetTeam", workCenterId: workcenterID }, true, function (res) {
                if (!res.Result) {
                    displayMessage(res.Message, res.Result);
                    return;
                }
                $('#ddlTeam').combobox({
                    valueField: 'TEAMID',
                    textField: 'TEAMNAME',
                    data: res.DBTable
                });
            });
        },
        //查询
        searchData: function () {
            var params = {};
            var queryFormData = $("#queryForm").serializeArray();
            $.each(queryFormData, function () {
                params[this.name] = this.value;
            });
            page.post(page.url, { action: "GetResourceList", params: JSON.stringify(params) }, true, function (res) {
                if (!res.Result) {
                    displayMessage(res.Message, res.Result);
                    return;
                }
                $("#gdResourceInfo").datagrid({ data: res.DBTable }); //绑定数据
            });
        },
        //绑定设备日历班次明细
        bindResCalDetail: function () {
            var selectRow = $("#gdResourceInfo").datagrid("getSelected");
            if (selectRow === null) {
                displayMessage("未选择设备", false);
                return;
            }
            page.clearPage(false, false, true);
            var params = {
                resourceID: selectRow.RESOURCEID,
                workShiftID: selectRow.WORKSHIFTID,
                startDate: $("#txtStartDate").datebox("getValue"),
                endDate: $("#txtEndDate").datebox("getValue")
            };
            page.post(page.url, { action: "GetResourceCalDetail", params: JSON.stringify(params) }, true, function (res) {
                if (!res.Result) {
                    displayMessage(res.Message, res.Result);
                    return;
                }
                //赋值柱状图需要的数据
                for (var i = 0; i < res.ReturnData.length; i++) {
                    resDetailView.xData.push(res.ReturnData[i].DayDate);
                    resDetailView.yData.push(res.ReturnData[i].Hours);
                    if (res.ReturnData[i].Hours > resDetailView.maxYData) { //获取最大的Y轴值
                        resDetailView.maxYData = res.ReturnData[i].Hours
                    }
                }
                resDetailView.workShiftList = res.ReturnData; //结果值赋值
                resDetailView.viewBar(); //绘制柱状图
            });
        },
        //清除页面（查询区域，列表区域，绘制区域）
        clearPage: function (query, list, view) {
            if (query) {
                $("#ddlWorkCenter").combobox("clear"); //工区
                $("#ddlTeam").combobox("clear"); //班组
                $("#txtResourceName").textbox("clear"); //设备号
                $("#txtStartDate").datebox("setValues", dayjs().startOf('M').format('YYYY-MM-DD')); //开始日期
                $("#txtEndDate").datebox("setValues", dayjs().endOf('M').format('YYYY-MM-DD')); //结束日期
            }
            if (list) {
                clearEasyuiDataGrid("gdResourceInfo"); //清空列表
            }
            if (view) {
                resDetailView.init(); //初始化绘制区域
            }
        },
        //post数据（路径，参数，是否异步，成功返回方法）
        post: function (url, param, async, callback) {
            $.ajax({
                type: "Post",
                url: url,
                data: param,
                cashe: false,
                async: async,
                dataType: "json",
                beforeSend: function () {
                    $.messager.progress({ text: '', msg: '处理中...' });
                },
                success: function (data) {
                    $.messager.progress('close');
                    callback(data);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    $.messager.progress('close');
                    displayMessage(XMLHttpRequest.responseText, false);
                    $("body").find(".easyui-linkbutton").each(function () {
                        $(this).linkbutton('enable');
                    });
                }
            });
        }
    };
    /*
    ---设备日历班次明细柱状图绘制
    */
    var resDetailView = {
        myChart: null, //图表对象
        xData: [], //X轴数据
        yData: [], //Y轴数据
        maxYData: 10, //Y轴最大值
        workShiftList: [], //班次明细
        //初始化
        init: function () {
            this.xData = [];
            this.yData = [];
            this.maxYData = 10;
            this.workShiftList = [];
            this.viewBar();
        },
        //绑定事件
        bind: function () {
            var dom = document.getElementById('mainView');
            this.myChart = echarts.init(dom);
            this.myChart.on('click', function (params) {
                if (params.componentType === 'series') {
                    // 确保是柱状图被点击
                    if (params.seriesType === 'bar') {
                        resDetailView.openEditWSForms(params.name)
                    }
                }
            });
            //列表加载
            $("#gdWorkShiftList").datagrid({
                columns: [[
                 { field: 'STARTTIME', title: '班次开始时间', width: 210 },
                 { field: 'ENDTIME', title: '班次结束时间', width: 210 }
                ]]
            });
            //保存按钮
            $('#btnSave').on("click", function () {
                resDetailView.saveData();
            });
            //保存按钮
            $('#btnClose').on("click", function () {
                $('#dd').dialog("close");
            });
        },
        //绘制柱状图
        viewBar: function () {
            var dom = document.getElementById('mainView');
            var myChart = echarts.init(dom);
            var option = {
                color: ['#00DDFF'],
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#FFD700'
                        }
                    },
                    formatter: function (params) {
                        var lableStr = '日期：' + params[0].name + '<br/>' + params[0].seriesName + '：' + params[0].value + '(H)';
                        var dList = resDetailView.workShiftList[params[0].dataIndex].WSDetail;
                        for (var i = 0; i < dList.length; i++) {
                            lableStr += "<br/> 班次" + (i + 1) + "：" + dList[i].WSTimeDetail;
                        }
                        return lableStr;
                    }
                },
                grid: {
                    top: '6%',
                    right: '3%',
                    left: '0%',
                    bottom: '2%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data: this.xData
                }],
                yAxis: [{
                    type: 'value',
                    scale: true,
                    max: this.maxYData,
                    min: 0
                }],
                series: [{
                    name: '设备班次时长',
                    type: 'bar',
                    data: this.yData
                }]
            };
            myChart.setOption(option);
            window.addEventListener('resize', myChart.resize);
        },
        //打开弹窗
        openEditWSForms: function (dayDate) {
            resDetailView.clearForm();
            var selectRow = $("#gdResourceInfo").datagrid("getSelected");
            if (selectRow === null) {
                displayMessage("未选择设备", false);
                return;
            }
            var params = {
                action: "GetWorkShiftListByDate",
                resourceID: selectRow.RESOURCEID,
                workShiftID: selectRow.WORKSHIFTID,
                dayDate: dayDate
            };
            page.post(page.url, params, true, function (res) {
                if (!res.Result) {
                    displayMessage(res.Message, res.Result);
                    return;
                }
                $("#txtDayDate").val(dayDate);
                $("#gdWorkShiftList").datagrid({ data: res.DBTable }); //绑定数据
                $('#dd').dialog({
                    title: "班次明细",
                    width: 500,
                    height: 510,
                    modal: true
                });
            });
        },
        //保存班次
        saveData: function () {
            var selectRow = $("#gdResourceInfo").datagrid("getSelected");
            if (selectRow === null) {
                displayMessage("未选择设备", false);
                return;
            }
            var params = {
                resourceID: selectRow.RESOURCEID,
                workShiftID: selectRow.WORKSHIFTID
            };
            var editWsForm = $("#editWsForm").serializeArray();
            $.each(editWsForm, function () {
                params[this.name] = this.value;
            });
            page.post(page.url, { action: "SaveResCalWorkShiftData", params: JSON.stringify(params) }, true, function (res) {
                if (!res.Result) {
                    displayMessage(res.Message, res.Result);
                    return;
                }
                $('#dd').dialog("close");
                page.bindResCalDetail(); //重新加载柱状图明细
            });
        },
        //清空弹窗数据
        clearForm: function () {
            clearEasyuiDataGrid("gdWorkShiftList"); //清空列表
            $('#txtWsStartTime').timespinner('setValue', '00:00:00');
            $('#txtWsEndTime').timespinner('setValue', '00:00:00');
        }
    };
    $(function () {
        page.init();
    });
</script>
